<template>
	<view class="app-task-box" v-if="!skeIsShow">
		<!-- 顶部任务展示率 -->
		<top-task-num></top-task-num>
		
		<!-- 任务类型及搜索 -->
		<view class="task-search">
			<!-- 任务类型 -->
			<view class="task-select">
				<picker
					mode="selector" 
					:range="selectorArray" 
					:value="selectedIndex" 
					@change="onPickerChange"
				>
					<view>{{ selectorArray[selectedIndex] }}</view>
				</picker>
			</view>
			
			<!-- 搜索 -->
			<view class="search-input-btn">
			    <input class="search-input" type="text" v-model="eventsKeyword" placeholder="活动名称"></input>
				<view class="search-line"></view>
			    <text @click="search" class="search-btn">搜索</text>
			</view>
		</view>
		
		<!-- body -->
		<view class="task-body">
			<view class="task-body-item" v-for="item in 3" :key="item">
				<!-- 任务标题 -->
				<view class="body-item-top">
					<view class="item-top-left">
						<!-- 图片 -->
						<view class="left-image">
							<image src="../../static/newImage/Frame_1.png"></image>
						</view>
						<h3 class="item-title">首保价值关怀</h3>
						<text class="item-text-block">首保提醒</text>
					</view>
					<view class="item-top-right">
						<text>已导出</text>
					</view>
				</view>
				
				<!-- 客户数量 -->
				<view class="body-item-center">
					客户数量：<text class="center-num">34</text>
				</view>
				
				<!-- 明细-导出VIN -->
				<view class="body-item-bottom">
					<view class="body-detail">明细</view>
					<view class="body-import">导出VIN</view>
				</view>
			</view>
		</view>
	</view>
	
	<!-- 骨架屏 -->
	<ske-appIndex v-else></ske-appIndex>
</template>

<script>
	import topTaskNum from "@/packageE/components/topTaskNum.vue"
	import skeAppIndexVue from "@/packageE/appPages/skeleton/SkeletonAppIndex.vue"
	export default {
		components: {
			"top-task-num": topTaskNum,
			"ske-appIndex": skeAppIndexVue,
		},
		data() {
			return {
				selectorArray: ['全部', '选项1', '选项2', '选项3', '选项4'], // 任务类型选项
				selectedIndex: 0, // 任务类型默认选中的项-索引
				eventsKeyword: '',
				skeIsShow: false,
			}
		},
		
		methods: {
			onPickerChange(event) {
				this.selectedIndex = event.detail.value;
				console.log('选择的值为：', this.selectorArray[this.selectedIndex]);
			}
		}
	}
</script>

<style lang="less" scoped>
	.app-task-box {
		padding: 12px;
		padding-bottom: var(--status-bar-height) ; // 距离底部安全区域
		background-color: #F6F6F6;
		
		// 任务类型选择 及 搜索
		.task-search {
			display: flex;
			align-items: center;
			margin: 12px 0;
			
			// 任务类型选择
			.task-select {
				text-align: center;
			}
			
			.task-select,
			.search-input-btn{
				flex: 1;
				margin-right: 12px;
				background-color: #fff;
				padding: 8px 12px;
				border-radius: 8px;
				min-height: 23px;
				line-height: 23px;
				font-size: 14px;
				font-weight: 400;
				
				.search-input{
					font-size: 14px;
				}
				.search-input::placeholder {
					font-size: 20px;
				}
				
				.search-btn {
					flex: 1;
					white-space: nowrap; /* 设置文本不允许换行 */
					font-size: 12px;
					font-weight: 400;
					color: #C9000F;
				}
			}
			.search-input-btn {
				margin-right: 0;
			}
			
			.search-input-btn {
				display: flex;
				flex: 1;
				align-items: center;
			}
		}
		
		/* body */
		.task-body {
			margin-top: 12px;
			
			.task-body-item {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-bottom: 12px;
				padding: 12px;
				border-radius: 8px;
				background-color: #fff;
				
				.body-item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					padding-bottom: 12px;
					border-bottom: 1px solid #E2E2E2;
					
					.item-top-left {
						display: flex;
						align-items: center;
						
						.left-image {
							width: 16px;
							height: 16px;
							image {
								width: 100%;
								height: 100%;
							}
						}
						
						.item-title {
							margin: 0 5px;
							font-size: 14px;
							font-weight: 500;
							color: #333333;
						}
						
						.item-text-block {
							margin-top: 2px;
							padding: 0 5px;
							border-radius: 2px;
							background-color: #FFE7E7;
							font-size: 10px;
							font-weight: 400;
							color: #C9000F;
						}
					}
					
					.item-top-right {
						font-size: 14px;
						font-weight: 400;
						color: #CECECE;
					}
				}
				
				.body-item-center {
					display: flex;
					align-items: center;
					margin-top: 12px;
					font-size: 12px;
					color: #999999;
					.center-num {
						color: #333333;
					}
				}
				
				.body-item-bottom {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 12px;
					font-size: 12px;
					font-weight: 500;
					color: #333333;
					
					.body-detail,
					.body-import{
						width: 70px;
						padding: 5px 5px;
						border-radius: 32px;
						border: 1px solid #333333;
						text-align: center;
					}
					.body-import {
						margin-left: 10px;
						border: 1px solid #FFAA00;
						color: #FFAA00;
					}
					
				}
				
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		
		// 搜索框 竖线
		.search-line {
			margin-right: 8px;
			width: 1px;
			height: 16px;
			background-color: #E2E2E2;
		}
	}
</style>
